<template>
	<view>
		<ttBar leftIcon="icon-back"  title="提现"></ttBar>
		<view class="card">
			<view class="cardBox">
				<text>可提现额</text>
				<text class="count">￥{{userInfo.amount}}</text>
				<text class="tishi"></text>
				<button @tap="toPage" data-url="withDrawal">立即提现</button>
			</view>
			
		</view>
		<text class="titleBx">佣金明细</text>
		<view class="enterBox">
	<!-- 		<view class="enterItem" @tap="toPage" data-url="cmdReward">
				<text class="iconfont icon-icon--1"></text>
				<text>团长奖励</text>
			</view> -->
			<view class="enterItem"  @tap="toPage" data-url="pkReturn">
				<text class="iconfont icon-fanxian"></text>
				<text>拼团返现</text>
			</view>
			<view class="enterItem" @tap="toPage" data-url="distributionComm">
				<text class="iconfont icon-zhuyaorenyuan"></text>
				<text>分销佣金</text>
			</view>
			<view class="enterItem"  @tap="myzhaoshangYongjin" >
				<text class="iconfont icon-shoucangdianjia"></text>
				<text>招商佣金</text>
			</view>
			<view class="enterItem" @tap="toOther">
				<text class="iconfont icon-qita1"></text>
				<text>其他</text>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			})
		},
		data() {
			return {
	
			};
		},
		methods:{
			login(){
				if (uni.getStorageSync('token')) {
					this.$store.dispatch("apiUserAutoLogin", {
						token: uni.getStorageSync('token')
					})
				}
			},
			toOther(){
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				});
			},
			myzhaoshangYongjin(){
				uni.navigateTo({
					url: '../../pagesB/myzhaoshangYongjin/myzhaoshangYongjin'
				});
			}
			
			
		},
		onLoad() {
			// this.login();
		
			
		},
		// 页面滚动到底部
		onReachBottom() {
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
		
				uni.stopPullDownRefresh();
			}, 1500)
		}
		
	}
</script>

<style lang="less">
	.titleBx{
		border-top: 1px solid #f6f6f6;
		font-size: 32upx;
		padding-left: 44upx;
		background-color: #FFFFFF;
		display: block;
		width: 100%;
		padding-bottom: 40upx;
		padding-top: 20upx;
	}
	.enterBox{
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		.enterItem{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 20upx;
			padding-left: 20upx;
			padding-right: 20upx;
			text{
				font-size: 28upx;
			}
			.iconfont{
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
				line-height: 90upx;
				text-align: center;
				font-size: 56upx;
				background: linear-gradient(135deg,#ffc62a,#ff9f2e);
				color: #FFFFFF;
				margin-bottom: 26upx;
			}
		}
	}
	page {
		background-color: #f6f6f6;
	}

	.card {
		padding: 14upx 30upx;
		background-color: #FFFFFF;
		padding-bottom: 60upx;
		.cardBox {
			height: 260rpx;
			background-image: linear-gradient(0deg, #da2c5c 0%, #e22f43 100%), linear-gradient(#e9ddd1, #e9ddd1);
			border-radius: 14rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #FFFFFF;
			font-size: 28upx;
			padding: 28upx 40upx;
			position: relative;

			.count {
				align-self: center;
				font-size: 48upx;
				font-weight: bold;
			}

			.tishi {
				font-size: 24upx;
			}

			button {
				position: absolute;
				height: 64upx;
				right: -6upx;
				top: 34upx;
				border: 2upx solid #da2c5c;
				line-height: 60upx;
				font-size: 28upx;
				color: #e12f45;
				border-radius: 32upx 0upx 0upx 32upx;
			}
		}

		.ts {
			display: flex;
			align-items: flex-start;
			font-size: 32upx;
			padding-top: 20upx;

			.iconfont {
				font-size: 44upx;
				color: #ffb423;
				margin-right: 10upx;
			}
		}
	}

	.tabHead {
		height: 90upx;
		display: flex;
		justify-content: space-around;
		border-bottom: 2upx solid #f2f2f2;
		background-color: #FFFFFF;

		text {
			font-size: 32upx;
			line-height: 82upx;
			border-bottom: 6upx solid rgba(0, 0, 0, 0);
			color: #202932;
		}

		.active {
			color: #f79f21;
			border-bottom: 6upx solid #f79f21;
		}
	}

	.tabCnt {
		display: flex;
		background-color: #FFFFFF;

		.cntItem {
			width: 33.33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 46upx;
			padding-bottom: 20upx;

			text {
				font-size: 32upx;
				color: #202932;
			}

			text:first-child {
				color: #8a8a8a;
				margin-bottom: 20upx;
			}

			.yugu {
				color: #f92121;
			}
		}
	}

	.list {
		display: flex;
		flex-direction: column;
		padding: 18upx;

		.row {
			background-color: #FFFFFF;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 10upx;
			display: flex;
			flex-direction: column;
			padding: 20upx 30upx;
			margin-bottom: 16upx;
			.statusBox{
				display: flex;
				align-items: center;
				font-size: 32upx;
				justify-content: space-between;
				margin-bottom: 20upx;
				.status{
					font-size: 28upx;
					height: 40upx;
					line-height: 40upx;
					padding: 0 20upx;
					border-radius: 20upx;
					color: #FFFFFF;
					background-color: #ffb423;
				}
			}
			.orderInfo{
				display: flex;
				flex-direction: column;
				font-size: 32upx;
				text{
					margin-bottom: 10upx;
				}
				.orderNo{
					color: #979797;
				}
			}
			.timeBox{
				display: flex;
				align-items: center;
				font-size: 28upx;
				.time{
					flex-grow: 1;
					color: #979797;
				}
				.yugu{
					color: #ff2020;
				}
			}
		}
	}
</style>
